<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./css/home.css">
	</head>
	<body>
		<div class="index">
			<div class="header">
				<img src="./static/home/1699846871093.jpg" mode=""></img>
				<span class="xuanZho"><a href="./videos.html">长视频</a> </span>
				<span>团购</span>
				<span>关注</span>
				<span class="t1">双11</span>
				<span class="xuanZho">推荐</span>
				<a href="./search.html">
					<img src="./static/home/1699846896869(1).jpg" mode=""></img>
				</a>
			</div>
			
			<div class="main"></div>

			<div class="footer">
				<div>
					<a href="./home.html">首页</a> 
				</div>
				<div>
					<a href="./procedure.html">朋友</a> 
				</div>
				<div>
					<img src="./static/proced/1699865786832.jpg" alt="">
				</div>
				<div>
					<a href="./message.html">消息</a> 
				</div>
				<div>
					<a href="./user.html">我的</a> 
				</div>
			</div>
		</div>
	</body>
	<script>
		var url=`http://rap2api.taobao.org/app/mock/315703/doyin.home`;
		
		var str="";
		const xhr = new XMLHttpRequest();
		xhr.open('GET', './json/1.json', true);
		xhr.onreadystatechange = function() {
		if (xhr.readyState === 4 && xhr.status === 200) {
			const jsonData = JSON.parse(xhr.responseText);
			console.log(jsonData.arr)
			// 处理返回的 JSON 数据
			let userimg = ["./static/home/1699846917025.jpg", "./static/home/1699846939096.jpg",
			              "./static/home/1699846917025.jpg","./static/home/1699846939096.jpg"];
			let referrer =["美食推荐","啾啾","耳朵手工","吃货小雷"];	  
            let usernum = ["100.7万", "18.7万", "10.7万","8.7万"];
			
			for (let i = 0; i < jsonData.arr.length; i++) {
			str += `
    		<div class="box1">
     			<div class="img">
        			<img src="${jsonData.arr[i].img}" mode=""></img>
      			</div>
      			<div class="span">${jsonData.arr[i].name}</div>
      			<div class="user">
					<div><img src="${userimg[i]}"></img>${referrer[i]}</div>
					<div><img src="./static/home/1699849074433.jpg"></img>${usernum[i]}</div>
      			</div>
			</div>`;
			}
			document.getElementsByClassName("main")[0].innerHTML=str
		}
		};
		xhr.send();
	</script>
</html>